<template>
  <!-- 周期购物流信息 -->
  <div class="item-block delivery_info" @click="JumpName('cycleSendDetail',{id:detailAll.detail.order_id})">
    <div class="delivery_logo">
      <img src="https://img.wifenxiao.com/h5-wfx/images/order/logistics.png" alt />
    </div>
    <div class="delivery_detail">
      <div v-for="(item, index) in detailAll.cycle_send" :key="index" class="item">
        <p class="info_logistics">{{deliveryDetailText(item,index)}}</p>
        <p class="info_time">{{getTime(item.delivery_time)}}</p>
      </div>
    </div>
    <div class="delivery_r">
      <!-- TODO 暂时隐藏svg -->
      <i class="icon-right"></i>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { formatDate } from '@/utils/index'
export default Vue.extend({
  props: {
    detailAll: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },

    linkTo(url) {
      window.location.href = url
    },
    deliveryDetailText(item, index) {
      if (this.detailAll.detail.is_self_take == 1) {
        return `第${parseInt(index) + 1}次门店自提`
      } else if (this.detailAll.detail.is_self_take == 2) {
        return `第${parseInt(index) + 1}次门店配送`
      } else {
        return `第${parseInt(index) + 1}次配送——${item.express_name} 运单编号：${
          item.express_no
        }`
      }
    },
    getTime(time) {
      return formatDate(time)
    }
  }
})
</script>

<style lang="scss">
.delivery_info {
  width: 100%;
  padding: 20px;
  border-top: 2px solid #f3f3f3;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .delivery_logo {
    height: 100%;
    margin-right:20px;
    vertical-align: middle;
    img {
      width: 40px;
    }
  }
  .delivery_detail {
    flex: 1;
    vertical-align: middle;
    line-height:1;
    padding-right:20px;
    // padding: 0 10px;
    // width: calc(100% - 90px);
    color: #666;
    .item{
      margin-bottom:26px;
      &:last-child{
        margin-bottom:0;
      }
    }
    .info_logistics{
      margin-bottom:14px;
      font-size:26px;
      line-height:1.4;
      color:#333;
    }
    .info_time{
      font-size:24px;
    }
  }
  .delivery_r {
    width: 20px;
    display: inline-block;
    .icon_right{
      width:22px;
    }
  }
}
</style>